<extend name="Index/index" />
<block name="mycss">
    <link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css">
    <link rel="stylesheet" href="__PUBLIC__/my.css">
    <script src="__PUBLIC__/js/jquery-1.8.3.min.js"></script>
</block>

<block name="main">
    <div class="container">
    <div class="row">
        <div class="col-md-7 col-md-offset-1">
            <ul class="nav nav-tabs">
                  <li role="presentation"><a href="<{:U('Collections/index')}>">我关注的收藏夹</a></li>
                  <li role="presentation"  class="active"><a href="#">我创建的收藏夹</a></li>
            </ul>
            <if condition="$black[0]['id'] eq null">
            <div class="mt20 xian shadown">
                <div class="xuwu">创建一个收藏夹，将喜欢的答案收集起来</div>
            </div>
            </if>
            <for start="0" end="count($black)">
            <div class="mt20 bing" style="height:60px">
                <if condition="$black[$i]['is_private'] eq 0">
                <div style="color:#225599" ><span class="glyphicon glyphicon-lock"></span>&nbsp;<b><a  href="<{:U('Collections/detail')}>" class="tiaoa" bh="<{$black[$i]['id']}>"><{$black[$i]['sname']}></a></b></div>
                <else/><div style="color:#225599" ><b><a href="<{:U('Collections/detail', 'id='.$black[$i]['id'])}>" class="tiaoa" bh="<{$black[$i]['id']}>"><{$black[$i]['sname']}></a></b></div>
                </if>
                <div class="mt10">回答·关注</div>
                <hr>
            </div>
            </for>
        </div>

        <div class="col-md-3">
            <div class="h6 rightshow">
                    <a href="<{:U('Index/index')}>"  style="color:#888"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;知乎首页</a>

                    <a href="<{:U('Collections/index')}>"  style="color:#888"><span class="glyphicon glyphicon-bookmark"></span>&nbsp;&nbsp;我的收藏</a>

                    <a href="<{:U('Question/following')}>"  style="color:#888"><span class="glyphicon glyphicon-check"></span>&nbsp;&nbsp;我关注的问题</a>

                    <a href="<{:U('Topics/index')}>" style="color:#888"><span class="glyphicon glyphicon-th-large"></span>&nbsp;&nbsp;话题广场</a>


                </div>

                <h5 class="mt30"> <b><img src="__PUBLIC__/images/2016-07-21_141413.jpg">&nbsp;&nbsp;知乎专栏</b> </h5>
                <div class="h6 rightshow">
                    <a href="<{:U('Explore/index')}>"  style="color:#888">发现</a>
                    <a href="<{:U('Article/index')}>"  style="color:#888">文章</a>
                </div>
                <div >© 2016 知乎</div>
            <div class="bod mao"></div>
            <div class="mt20"><a href="" data-toggle="modal" data-target="#myModal">+创建收藏夹</a>
              <!-- 模态框（Modal） -->
                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
                                   aria-labelledby="myModalLabel" aria-hidden="true">
                                   <div class="modal-dialog ">
                                      <div class="modal-content">
                                         <div class="modal-header bgq">
                                            <button type="button" class="close" 
                                               data-dismiss="modal" aria-hidden="true">
                                                  &times;
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">
                                               创建新收藏夹
                                            </h4>
                                         </div>
                                         <div class="modal-body">
                                            <form action="">
                                                <table>
                                                <tr style="margin-top:-25px;
                                    display: inline-block;">
                                                <th>标题:&nbsp;&nbsp;</th>
                                                <td><input type="text" placeholder="最多输入20字" maxlength="20" class="biaoti"></td>
                                                </tr>
                                                <tr style="margin-top:10px;
                                    display: inline-block;">
                                                <th>描述:&nbsp;&nbsp;</th>
                                                <td> <textarea name="" id="" cols="60" rows="4" placeholder="最多输入256字" maxlength="256" class="neirong"></textarea> 
                                                </td>
                                                </tr>
                                                <tr style="margin-top:100px;">
                                                        <td>
                                                            <label><input type="radio" name="qx" checked="checked" class="pri" value="1">公开
                                                            <span class="xixi">公开后不能设置为私密</span></label>
                                                            <br><br>
                                                            <label><input name="qx" type="radio" class="pri" value="0">私密
                                                            <span class="xixi">只有你可以查看这个收藏夹</span></label>
                                                        </td>
                                                </tr>
                                                </table>
                                            </form>
                                         </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" 
                                               data-dismiss="modal">取消
                                                    </button>
                                                    <button type="button" class="btn btn-info cat fool">
                                                    确认创建
                                                    </button>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal -->
            </div>
        </div>
    </div>
    </div>
</body>
<script>
    $(function(){
        $('#try tr td').mouseover(function(){
            $(this).children().css("color","#225599");
            $(this).children().css("color","#225599");
        })
        $('#try tr td').mouseout(function(){
            $(this).children().css('color','#666');
            $(this).children().css("color","#666");
        })

        $('.cat').click(function(){
            if ($('.biaoti').val() == '') {
                alert('请输入标题');
                return false;
            };

            $.ajax({

                data:{'sname' : $('.biaoti').val(),'fondcontent' : $('.neirong').val(),'is_private' : $('input[name="qx"]:checked ').val()},
                type:'post',
                url:"<{:U('Collections/mine')}>",
                success:function(data){
                    if (data) {
                        alert('已创建');
                        window.location.reload();
                    };
                }
            });

        })
            $('.fool').click(function(){
            $(this).attr('aria-hidden','true');
            $(this).attr('data-dismiss','modal');
            $(this).attr('class','close');
        })

            $('.tiaoa').click(function(){
                var id = $(this).attr('bh');
                $.ajax({
                    type:'get',
                    url:"<{:U('Collections/detail')}>",
                    
                });
            })
    })

</script>
</block>